<template>
    <div class="promoteBusinessBottomComponent" v-if="oItem" :style="{
        paddingLeft: oItem.main.wrapperLr+'px',
        paddingRight: oItem.main.wrapperLr+'px',
        paddingTop: oItem.main.wrapperMt+'px',
        paddingBottom: oItem.main.wrapperMb+'px',
    }">
        <div class="content" :style="{
          backgroundColor:oItem.main.wrapperBgColor||'transparent', 
          backgroundImage:'url('+oItem.main.wrapperBgImg+')',
          borderTopLeftRadius: oItem.main.wrapperBRTopLr+'px',
          borderTopRightRadius: oItem.main.wrapperBRTopLr+'px',
          borderBottomLeftRadius: oItem.main.wrapperBRBottomLr+'px',
          borderBottomRightRadius: oItem.main.wrapperBRBottomLr+'px',
         

          paddingLeft: oItem.main.moduleLr+'px',
          paddingRight: oItem.main.moduleLr+'px',
          paddingTop: oItem.main.moduleMt+'px',
          paddingBottom: oItem.main.moduleMb+'px',

        }">
            <div class="foot" :style="{
        backgroundColor:oItem.main.moduleBgColor||'transparent', 
        backgroundImage:'url('+oItem.main.moduleBgImg+')',
        borderTopLeftRadius: oItem.main.moduleBRTopLr+'px',
        borderTopRightRadius: oItem.main.moduleBRTopLr+'px',
        borderBottomLeftRadius: oItem.main.moduleBRBottomLr+'px',
        borderBottomRightRadius: oItem.main.moduleBRBottomLr+'px',
      }">
                <div class="top">
                    <img :src="zhanye2" alt="" :style="{width: oItem.main.logoSize+'px', height: oItem.main.logoSize+'px'}" />
                    <span :style="{color: oItem.main.titleFontColor||'transparent', fontSize: oItem.main.titleFontSize+'px'}">淘宝推广收益(元)</span>
                </div>
                <ul class="article">
                    <li>
                        <p class="tit" :style="{color:oItem.main.fontNormalColor||'transparent'}">APP佣金</p>
                        <p class="val" :style="{color:oItem.main.highLightFontColor||'transparent'}">
                            <span class="num">15</span>
                            <span class="tag">元/单</span>
                        </p>
                    </li>
                    <li>
                        <p class="tit" :style="{color:oItem.main.fontNormalColor||'transparent'}">WAP佣金</p>
                        <p class="val" :style="{color:oItem.main.highLightFontColor||'transparent'}">
                            <span class="num">10</span>
                            <span class="tag">元/单</span>
                        </p>
                    </li>
                    <li>
                        <p class="tit" :style="{color:oItem.main.fontNormalColor||'transparent'}">话费佣金</p>
                        <p class="val" :style="{color:oItem.main.highLightFontColor||'transparent'}">
                            <span class="num">12</span>
                            <span class="tag">元/单</span>
                        </p>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>
<script>
import zhanye2 from "@/static/images/zhanye2.jpg";
import Bus from "@/utils/bus";
import { mapState } from "vuex";
export default {
    name: "promoteBusinessBottomComponent",
    data() {
        return {
            oItem: null,
            zhanye2,
        };
    },
    created() {},
    props: ["item", "ename", "id"],
    components: {},
    mounted() {
        this.$nextTick(() => {
            this.init();
        });
        const emitName = this.ename + this.id;
        Bus.$off(emitName);
        Bus.$on(emitName, (control) => {
            //console.log("announcementComponent被通知更新");
            this.oItem = null;
            this.$nextTick(() => {
                this.oItem = JSON.parse(control);
            });
        });
    },
    methods: {
        //页面初始化
        init() {
            this.oItem = null;
            this.oItem = JSON.parse(JSON.stringify(this.item));
        },
    },
    computed: mapState(["decorate"]),
    watch: {},
};
</script>
<style scoped lang="scss">
.promoteBusinessBottomComponent {box-sizing: border-box;
    .content {
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-attachment: scroll;
        box-sizing: border-box;
        .foot {
            box-shadow: 3px 3px 3px #eee, -3px 3px 3px #eee, 3px -3px 3px #eee,
                -3px -3px 3px #eee;
            display: flex;
            padding: 15px;
            box-sizing: border-box;
            flex-direction: column;
            background-position: center center;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            background-attachment: scroll;
            .top {
                display: flex;
                align-items: center;
                margin-bottom: 10px;
                img {
                    width: 36px;
                    height: 36px;
                    margin-right: 10px;
                }
                span {
                    font-size: 16px;
                }
            }
            .article {
                display: flex;
                padding-left: 15%;
                box-sizing: border-box;
                margin-bottom: 10px;
                li {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    width: 33.33%;
                    .tit {
                        font-size: 14px;
                        margin-bottom: 5px;
                    }
                    .val {
                        display: flex;
                        align-items: flex-end;
                        color: red;
                        .num {
                            font-size: 22px;
                        }
                        .tag {
                            font-size: 14px;
                            margin-bottom: 2px;
                        }
                    }
                }
            }
        }
    }
}
</style>
